<template>
	<view class="container">
		<view class="header">
			<view class="title">我的证书</view>
		</view>
		
		<view class="empty-box" v-if="certificateList.length === 0">
			<image class="empty-icon" src="/static/images/empty-box.png" mode="aspectFit"></image>
			<text class="empty-text">暂无证书</text>
			<text class="empty-desc">完成相关考试后可获得证书</text>
		</view>
		
		<scroll-view scroll-y class="certificate-list" v-else>
			<!-- 证书列表 -->
			<view class="certificate-item" v-for="(item, index) in certificateList" :key="index">
				<!-- 卡片标题 -->
				<view class="card-header">
					<text class="card-title">{{getRoleTitle(item)}}</text>
					<view class="status-badge" :class="{
						'status-valid': item.status === 'approved',
						'status-expired': item.status === 'expired', 
						'status-pending': item.status === 'pending',
						'status-rejected': item.status === 'rejected',
						'status-unknown': item.status !== 'approved' && item.status !== 'expired' && item.status !== 'pending' && item.status !== 'rejected'
					}">
						<text class="status-text">{{getStatusDesc(item.status)}}</text>
					</view>
				</view>
				
				<!-- 白色内容区域 -->
				<view class="card-content">
					<!-- 第一行：姓名、性别、年龄 -->
					<view class="info-row">
						<view class="info-item">
							<text class="info-label">姓名：</text>
							<text class="info-value">{{item.real_name}}</text>
						</view>
						<view class="info-item" v-if="item.gender">
							<text class="info-label">性别：</text>
							<text class="info-value">{{item.gender}}</text>
						</view>
						<view class="info-item" v-if="item.age">
							<text class="info-label">年龄：</text>
							<text class="info-value">{{item.age}}</text>
						</view>
					</view>
					
					<!-- 第二行：身份、等级（仅裁判员显示等级和认证时间） -->
					<view class="info-row">
						<view class="info-item">
							<text class="info-label">身份：</text>
							<text class="info-value">{{getRoleName(item)}}</text>
						</view>
						<view class="info-item" v-if="item.role_type !== 4 && getLevelName(item)">
							<text class="info-label">等级：</text>
							<text class="info-value">{{getLevelName(item)}}</text>
						</view>
						<view class="info-item" v-if="item.role_type !== 4 && item.issue_date">
							<text class="info-label">认证日期：</text>
							<text class="info-value">{{formatRegisterDate(item.issue_date)}}</text>
						</view>
					</view>
					
					<!-- 第三行：所属协会 -->
					<view class="info-row">
						<view class="info-item full-width">
							<text class="info-label">所属协会：</text>
							<text class="info-value">{{item.register_organization}}</text>
						</view>
					</view>
					
					<!-- 第四行：证书编号 -->
					<view class="info-row">
						<view class="info-item full-width">
							<text class="info-label">{{item.role_type === 4 ? '工作职务：' : '证书编号：'}}</text>
							<text class="info-value">{{item.certificate_no}}</text>
						</view>
					</view>
					
					<!-- 非裁判员单独显示认证时间 -->
					<view class="info-row" v-if="item.role_type === 4 && item.issue_date">
						<view class="info-item full-width">
							<text class="info-label">认证时间：</text>
							<text class="info-value">{{formatRegisterDate(item.issue_date)}}</text>
						</view>
					</view>
					
					<!-- 有效期 -->
					<view class="info-row" v-if="item.expire_date">
						<view class="info-item full-width">
							<text class="info-label">有效期至：</text>
							<text class="info-value">{{formatRegisterDate(item.expire_date)}}</text>
						</view>
					</view>
				</view>
				
				<!-- 等级徽章（仅高级别裁判员显示） -->
				<view class="level-badge" v-if="item.level && item.level >= 5">
					<text class="badge-text">{{item.level === 6 ? '国际级' : '国家级'}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getToken, syncTokenStorage } from '../../utils/tokenManager.js';
	
	export default {
		data() {
			return {
				certificateList: [],
				userInfo: {}
			}
		},
		onLoad() {
			// 获取用户信息
			this.getUserInfo();
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				try {
					// 先同步token存储
					syncTokenStorage();
					
					const userInfoStr = uni.getStorageSync('userInfo');
					if (userInfoStr) {
						this.userInfo = JSON.parse(userInfoStr);
						// 获取证书列表
						this.getCertificates();
						
						// 检查是否有待审核的证书
						if (this.userInfo.credential_token) {
							this.checkPendingCredentials(this.userInfo.credential_token);
						}
						
						// 确保用户有个人信息
						this.ensureUserInfo();
					} else {
						// 未登录状态处理
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						});
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/login'
							});
						}, 1500);
					}
				} catch (e) {
					console.error('获取用户信息失败', e);
				}
			},
			
			// 确保用户有个人信息
			async ensureUserInfo() {
				if (!this.userInfo.real_name) {
					try {
											// 如果用户信息中没有姓名，可能需要从服务器获取更详细的信息
					const userService = uniCloud.importObject('user-service');
					const res = await userService.getUserInfo(getToken());
						
						if (res.code === 0 && res.data) {
							// 更新用户信息
							this.userInfo = {...this.userInfo, ...res.data};
							// 保存更新后的用户信息
							uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
							// 重新加载证书
							this.getCertificates();
						}
					} catch (err) {
						console.error('获取用户信息失败', err);
					}
				}
			},
			
			// 获取证书列表
			async getCertificates() {
				const userId = this.userInfo._id;
				if (!userId) return;
				
				// 先显示加载中
				uni.showLoading({
					title: '加载中...'
				});
				
				try {
					const credentialService = uniCloud.importObject('credential-service');
					const res = await credentialService.getCertificates(userId, getToken());
					
					uni.hideLoading();
											if (res.code === 0) {
							// 打印原始证书数据
							console.log('获取到的原始证书数据:', JSON.stringify(res.data));
							
							this.certificateList = res.data || [];
							
							// 处理证书数据，确保必要字段存在
							if (this.certificateList.length > 0) {
								this.certificateList.forEach((cert, index) => {
									// 保存原始姓名用于调试
									const originalName = cert.real_name;
									console.log(`证书${index+1}原始数据:`, JSON.stringify(cert));
									
									// 添加证书标题
									if (!cert.title) {
										if (cert.level) {
											const levelMap = {
												1: '三级裁判员',
												2: '二级裁判员',
												3: '一级裁判员',
												4: '预备国家级裁判员',
												5: '国家级裁判员',
												6: '国际级裁判员'
											};
											cert.title = levelMap[cert.level] || '足球裁判员';
										} else {
											cert.title = '足球裁判员证书';
										}
									}
									
									// 强制保留证书中的原始姓名(除非完全为空)
									if (typeof cert.real_name === 'undefined' || cert.real_name === null || cert.real_name.trim() === '') {
										// 只有当证书中完全没有姓名时采用备选方案
										console.log(`证书${index+1}姓名为空，尝试使用备选姓名`);
										if (this.userInfo.realname) {
											cert.real_name = this.userInfo.realname;
											console.log(`使用realname: ${this.userInfo.realname}`);
										} else if (this.userInfo.real_name) {
											cert.real_name = this.userInfo.real_name;
											console.log(`使用real_name: ${this.userInfo.real_name}`);
										} else if (this.userInfo.nickname) {
											cert.real_name = this.userInfo.nickname;
											console.log(`使用nickname: ${this.userInfo.nickname}`);
										} else if (this.userInfo.username) {
											cert.real_name = this.userInfo.username;
											console.log(`使用username: ${this.userInfo.username}`);
										} else {
											cert.real_name = '用户';
											console.log('使用默认值: 用户');
										}
									} else {
										console.log(`保留证书${index+1}原始姓名: "${cert.real_name}"`);
									}
									
									// 检查姓名是否发生变化
									if (originalName !== cert.real_name) {
										console.log(`证书${index+1}姓名已从"${originalName}"变为"${cert.real_name}"`);
									} else {
										console.log(`证书${index+1}姓名未变: "${cert.real_name}"`);
									}
									
									// 确保注册单位字段存在
									if (!cert.register_organization && cert.issuer) {
										cert.register_organization = cert.issuer;
									} else if (!cert.register_organization) {
										cert.register_organization = '足球裁判规则学习平台';
									}
									
									// 添加图片URL
									if (!cert.image_url && cert.certificate_image) {
										cert.image_url = cert.certificate_image;
									}
									
									// 如果有register_date但没有issue_date，使用register_date
									if (!cert.issue_date && cert.register_date) {
										cert.issue_date = cert.register_date;
									}
								});
								
								// 最终证书列表
								console.log('处理后的证书列表:', JSON.stringify(this.certificateList));
								
								// 如果有证书且状态为approved，同步更新用户资料的证书状态
								const approvedCert = this.certificateList.find(cert => cert.status === 'approved');
								if (approvedCert) {
									this.updateUserCredentialStatus('approved');
								}
							}
					} else {
						console.error('获取证书列表失败', res?.message);
						uni.showToast({
							title: '获取证书列表失败',
							icon: 'none'
						});
						
						// 如果是未登录错误，尝试重新登录
						if (res?.message && res.message.includes('未登录')) {
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/login/login'
								});
							}, 1500);
						}
					}
				} catch (err) {
					console.error('调用获取证书列表云对象失败', err);
					uni.hideLoading();
					uni.showToast({
						title: '系统错误，请稍后再试',
						icon: 'none'
					});
				}
			},
			
			// 同步更新用户的证书状态
			async updateUserCredentialStatus(status) {
				try {
					const userService = uniCloud.importObject('user-service');
					const res = await userService.saveUserProfile({
						userId: this.userInfo._id,
						credential_status: status
					});
					
					if (res.code === 0) {
						// 更新本地存储的用户信息
						const userInfo = { ...this.userInfo, credential_status: status };
						uni.setStorageSync('userInfo', JSON.stringify(userInfo));
					}
				} catch (err) {
					console.error('更新用户证书状态失败', err);
				}
			},
			
			// 检查是否有待审核的证书
			async checkPendingCredentials(token) {
				console.log('检查待审核证书, token:', token);
				try {
					const credentialService = uniCloud.importObject('credential-service');
					const res = await credentialService.getCredentialInfo({
						token: token
					});
					
					console.log('获取待审核证书信息:', res);
					if (res && res.code === 0 && res.data) {
						const credential = res.data;
						console.log('待审核证书数据:', credential);
						
						// 如果有待审核或被拒绝的证书，添加到列表中
						if (credential.status === 'pending' || credential.status === 'rejected') {
							// 设置不同角色的证书标题
							let title = '';
							if (credential.level) { // 裁判员
								const levelMap = {
									1: '三级裁判员',
									2: '二级裁判员',
									3: '一级裁判员',
									4: '预备国家级裁判员',
									5: '国家级裁判员',
									6: '国际级裁判员'
								};
								title = levelMap[credential.level] || '足球裁判员';
							} else if (credential.role_type === 3) { // 裁判监督
								title = '足球裁判监督';
							} else if (credential.role_type === 4) { // 管理员
								title = '足球裁判管理员';
							} else { // 默认
								title = '足球裁判证书';
							}
							
							// 确保有姓名 - 优先使用证书中的姓名
							let realName = '';
							if (credential.real_name && credential.real_name.trim() !== '') {
								realName = credential.real_name;
								console.log('待审核证书使用原始姓名:', realName);
							} else {
								realName = this.userInfo.real_name || this.userInfo.nickname || this.userInfo.username || '用户';
								console.log('待审核证书使用用户信息中的姓名:', realName);
							}
							
							// 使用role_name优先显示
							if (credential.role_name) {
								title = credential.role_name;
							}
							
							// 构建证书对象
							const pendingCertificate = {
								_id: credential._id,
								title: title,
								role_name: credential.role_name,
								role_type: credential.role_type,
								real_name: realName,
								certificate_no: credential.certificate_no || '待分配',
								issue_date: credential.register_date,
								expire_date: credential.expire_date,
								register_organization: credential.register_organization,
								issuer: credential.register_organization,
								background_url: '/static/images/certificate-bg1.jpg',
								image_url: credential.certificate_image,
								status: credential.status,
								description: credential.remarks || '该证书正在审核中，请耐心等待。'
							};
							
							console.log('添加待审核证书到列表:', pendingCertificate);
							this.certificateList.push(pendingCertificate);
						}
					}
				} catch (err) {
					console.error('获取待审核证书信息失败', err);
				}
			},
			
			// 获取模拟证书列表
			getMockCertificates() {
				// 模拟数据
				this.certificateList = [
					{
						_id: '1',
						title: '足球裁判基础规则证书',
						certificate_no: 'REF-BASIC-2023001',
						issue_date: new Date('2023-06-15').getTime(),
						expire_date: new Date('2025-06-15').getTime(),
						background_url: '/static/images/certificate-bg1.jpg',
						image_url: '/static/images/certificate-full1.jpg',
						issuer: '中国足球协会裁判委员会',
						description: '该证书证明持有人已完成足球裁判基础规则的学习和考核，具备基本的足球规则知识。'
					},
					{
						_id: '2',
						title: '足球越位规则专项证书',
						certificate_no: 'REF-OFFSIDE-2023002',
						issue_date: new Date('2023-07-20').getTime(),
						expire_date: new Date('2025-07-20').getTime(),
						background_url: '/static/images/certificate-bg2.jpg',
						image_url: '/static/images/certificate-full2.jpg',
						issuer: '中国足球协会裁判委员会',
						description: '该证书证明持有人已完成足球越位规则的专项学习和考核，具备专业的越位判罚能力。'
					},
					{
						_id: '3',
						title: '足球裁判手势信号证书',
						certificate_no: 'REF-SIGNAL-2023003',
						issue_date: new Date('2023-08-10').getTime(),
						expire_date: new Date('2023-08-10').getTime(), // 已过期
						background_url: '/static/images/certificate-bg3.jpg',
						image_url: '/static/images/certificate-full3.jpg',
						issuer: '中国足球协会裁判委员会',
						description: '该证书证明持有人已完成足球裁判手势信号的学习和考核，能够准确使用裁判手势。'
					}
				];
			},
			
			// 查看证书详情
			viewCertificate(item) {
				this.currentCertificate = item;
				this.showModal = true;
			},
			
			// 关闭证书详情弹窗
			closeModal() {
				this.showModal = false;
			},
			
			// 分享证书
			shareCertificate() {
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					title: this.currentCertificate.role_name || this.currentCertificate.title,
					summary: this.currentCertificate.role_type === 4 ? 
						`工作职务：${this.currentCertificate.certificate_no}` : 
						`证书编号：${this.currentCertificate.certificate_no}`,
					imageUrl: this.currentCertificate.image_url,
					success: (res) => {
						console.log('分享成功', res);
					},
					fail: (err) => {
						console.error('分享失败', err);
					}
				});
			},
			
			// 下载证书
			downloadCertificate() {
				uni.showLoading({
					title: '下载中...'
				});
				
				// 下载图片
				uni.downloadFile({
					url: this.currentCertificate.image_url,
					success: (res) => {
						if (res.statusCode === 200) {
							// 保存图片到相册
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: '证书已保存到相册',
										icon: 'success'
									});
								},
								fail: (err) => {
									console.error('保存图片失败', err);
									uni.hideLoading();
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
								}
							});
						} else {
							uni.hideLoading();
							uni.showToast({
								title: '下载失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('下载失败', err);
						uni.hideLoading();
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 判断证书是否有效
			isValid(certificate) {
				// 检查状态
				if (certificate.status === 'pending') {
					return 'pending';
				}
				
				if (certificate.status === 'rejected') {
					return 'rejected';
				}
				
				if (certificate.status === 'expired' || (certificate.status === 'approved' && certificate.expire_date && Date.now() > certificate.expire_date)) {
					return 'expired';
				}
				
				return 'valid';
			},
			
			// 获取状态文本
			getStatusText(status) {
				switch(status) {
					case 'approved':
						return '有效';
					case 'expired':
						return '已过期';
					case 'pending':
						return '审核中';
					case 'rejected':
						return '未通过';
					default:
						return '未知';
				}
			},
			
			// 格式化日期
			formatDate(timestamp) {
				if (!timestamp) return '';
				
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				
				return `${year}-${month}-${day}`;
			},
			
			// 添加预览大图方法
			previewFullImage(url) {
				if (!url) return;
				uni.previewImage({
					urls: [url],
					current: url,
					indicator: 'number',
					loop: false
				});
			},
			
			// 获取卡片标题
			getRoleTitle(item) {
				if (item.role_type === 4) {
					return '管理员证书';
				} else if (item.role_type === 3) {
					return '裁判监督证书';
				} else if (item.role_type === 1 && item.level) {
					const levelMap = {
						1: '三级裁判员证书',
						2: '二级裁判员证书',
						3: '一级裁判员证书',
						4: '预备国家级裁判员证书',
						5: '国家级裁判员证书',
						6: '国际级裁判员证书'
					};
					return levelMap[item.level] || '裁判员证书';
				} else {
					return '裁判员证书';
				}
			},
			
			// 获取角色名称
			getRoleName(item) {
				if (item.role_type === 4) {
					return '管理员';
				} else if (item.role_type === 3) {
					return '裁判监督';
				} else {
					return '裁判员';
				}
			},
			
			// 获取等级名称
			getLevelName(item) {
				if (item.role_type === 1 && item.level) {
					const levelMap = {
						1: '三级',
						2: '二级',
						3: '一级',
						4: '预备国家级',
						5: '国家级',
						6: '国际级'
					};
					return levelMap[item.level] || '';
				}
				return '';
			},
			
			// 获取状态描述
			getStatusDesc(status) {
				switch(status) {
					case 'approved':
						return '有效';
					case 'expired':
						return '已过期';
					case 'pending':
						return '审核中';
					case 'rejected':
						return '未通过';
					default:
						return '未知';
				}
			},
			
			// 格式化注册日期
			formatRegisterDate(timestamp) {
				if (!timestamp) return '';
				
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #F5F5F5;
		display: flex;
		flex-direction: column;
		padding: 0 0 30rpx 0;
	}
	
	/* 头部样式 */
	.header {
		background-color: #FFFFFF;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	
	/* 空状态样式 */
	.empty-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 100rpx 0;
	}
	
	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: #999999;
		margin-bottom: 10rpx;
	}
	
	.empty-desc {
		font-size: 28rpx;
		color: #AAAAAA;
	}
	
	/* 证书列表样式 */
	.certificate-list {
		flex: 1;
		padding: 30rpx 15rpx;
	}
	
	.certificate-item {
		position: relative;
		background: linear-gradient(135deg, #1BAE76, #0FA68E, #0891B2);
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 30rpx rgba(27, 174, 118, 0.25);
		transition: all 0.3s ease;
	}
	
	.certificate-item:active {
		transform: scale(0.98);
	}
	
	/* 卡片标题 */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 25rpx 20rpx;
	}
	
	.card-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	}
	
	.status-badge {
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 600;
		background-color: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10rpx);
	}
	
	.status-badge.status-valid {
		color: #1BAE76;
	}
	
	.status-badge.status-expired {
		color: #FF3B30;
	}
	
	.status-badge.status-pending {
		color: #FF9500;
	}
	
	.status-badge.status-rejected {
		color: #FF3B30;
	}
	
	.status-badge.status-unknown {
		color: #999999;
	}
	
	.status-text {
		font-size: 24rpx;
	}
	
	/* 白色内容区域 */
	.card-content {
		background-color: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10rpx);
		margin: 0 15rpx 15rpx;
		border-radius: 16rpx;
		padding: 25rpx;
	}
	
	.info-row {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
		align-items: center;
		line-height: 1.5;
	}
	
	.info-row:last-child {
		margin-bottom: 0;
	}
	
	.info-item {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
		min-width: 0;
		line-height: 1.5;
	}
	
	.info-item.full-width {
		width: 100%;
		margin-right: 0;
	}
	
	.info-label {
		font-size: 28rpx;
		color: #666666;
		font-weight: 500;
		white-space: nowrap;
		margin-right: 8rpx;
		line-height: 1.5;
	}
	
	.info-value {
		font-size: 28rpx;
		color: #333333;
		font-weight: 600;
		word-break: break-all;
		flex: 1;
		line-height: 1.5;
	}
	
	/* 等级徽章 */
	.level-badge {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		background: linear-gradient(135deg, #FFD700, #FFA500);
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.4);
		z-index: 10;
	}
	
	.level-badge .badge-text {
		font-size: 22rpx;
		font-weight: bold;
		color: #8B4513;
		text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
	}
</style> 